<template>
  <div>
    <div class="circle">
      <span class="circle__btn">
        <icon-font class="play" type="icon-yinle" />
        <icon-font class="pause" type="icon-bofangbeifen13" />
      </span>
      <span class="circle__back-1"></span>
      <span class="circle__back-2"></span>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { IconFont } from '@/base-ui/Icons/index'
</script>
<style lang="less" scoped>
/*  PLAY BUTTON  */
.circle {
  grid-column: 2/3;
  grid-row: 4/6;
  width: 9rem;
  height: 100%;
  justify-self: center;
  border-radius: 1rem;
  display: grid;
  grid-template-rows: 1fr;
  justify-items: center;
  align-items: center;
}
.circle__btn {
  grid-row: 1/2;
  grid-column: 1/2;
  width: 6rem;
  height: 6rem;
  display: flex;
  margin: 0.6rem;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  font-size: 3.2rem;
  color: @primary;
  z-index: 300;
  background: @greyLight-1;
  box-shadow: 0.3rem 0.3rem 0.6rem @greyLight-2, -0.2rem -0.2rem 0.5rem @white;
  cursor: pointer;
  position: relative;
}
.circle__btn.shadow {
  box-shadow: inset 0.2rem 0.2rem 0.5rem @greyLight-2,
    inset -0.2rem -0.2rem 0.5rem @white;
}
.circle__btn .play {
  position: absolute;
  opacity: 0;
  transition: all 0.2s linear;
}
.circle__btn .play.visibility {
  opacity: 1;
}
.circle__btn .pause {
  position: absolute;
  transition: all 0.2s linear;
}
.circle__btn .pause.visibility {
  opacity: 0;
}
.circle__back-1,
.circle__back-2 {
  grid-row: 1/2;
  grid-column: 1/2;
  width: 6rem;
  height: 6rem;
  border-radius: 50%;
  filter: blur(1px);
  z-index: 100;
}
.circle__back-1 {
  box-shadow: 0.4rem 0.4rem 0.8rem @greyLight-2, -0.4rem -0.4rem 0.8rem @white;
  background: linear-gradient(to bottom right, @greyLight-2 0%, @white 100%);
  -webkit-animation: waves 4s linear infinite;
  animation: waves 4s linear infinite;
}
.circle__back-1.paused {
  -webkit-animation-play-state: paused;
  animation-play-state: paused;
}
.circle__back-2 {
  box-shadow: 0.4rem 0.4rem 0.8rem @greyLight-2, -0.4rem -0.4rem 0.8rem @white;
  -webkit-animation: waves 4s linear 2s infinite;
  animation: waves 4s linear 2s infinite;
}
.circle__back-2.paused {
  -webkit-animation-play-state: paused;
  animation-play-state: paused;
}
</style>
